<template>
	<view class="wf-item-page">
		<view class="img-cut" v-if="isMin">
			<view class="item-img" :style="'background-image: url('+item.dycover+');'">
				
			</view>
		</view>
		<image v-else :src="item.dycover" mode="widthFix" class="item-img" />
		<view class="item-title">{{dytitle}}</view>
		<view class="item-info">
			<image :src="item.headurl" mode="aspectFill" class="info-avatar" />
			<view class="info-nickname text-cut">{{item.nickname}}</view>
			
			<view class="info-see">
				<image src="/static/img/icon_browse.png" mode="widthFix" class="icon" /> 
				{{item.browsenum}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			item:{
				type:Object,
				require:true
			}
		},
		computed:{
			isMin() {
				if (!this.item.width) return 1
				let width = this.item.width-0
				let height = this.item.height-0
				let isMin = height/width -1.3 > 0
				return isMin
			},
			dytitle() {
				if (!this.item.dytitle) return ''
				return decodeURI(this.item.dytitle)
			},
			
			 
		},
	}
</script>

<style lang="scss" scoped>
	.wf-item-page{
		background: #fff;
		overflow: hidden;
		border-radius: 5px;
		box-shadow:  1px 0 10px #999;
	}
	.item-title{
		padding: 16rpx;
		color: #333333;
		font-size: 28rpx;
		line-height: 1.5;
	}
	.img-cut{
		width: 100%;
		.item-img{
			height: 420rpx;
			background-size: cover;
			background-position: center;
		}
	}
	.item-img{
		width: 100%;
	}
	
	.item-info{
		font-size: 24rpx;
		display: flex;
		align-items: center;
		padding: 0 16rpx 24rpx;
	}
	.info-see{
		color: #999999;
		display: flex;
		align-items: center;
		.icon{
			width: 30rpx;
			margin-right: 4rpx;
		}
	}
	.info-avatar{
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-right: 8rpx;
	}
	
	.info-nickname{
		color: #333;
		flex: 1;
		margin-right: 18rpx;
	}
</style>
